import { useState, useEffect, useRef } from 'react'
import BusinessMap from '../../../../common/BusinessMap';
import CztzhfxResult from './Cztzhfx/CztzhfxResult';
import LeftPanel from './LeftPanel';
import RightPanel from './RightPanel';
import ZhyxzhfxResult from './Zhyxzhfx/ZhyxzhfxResult';
import CszhfxResult from './Cszhfx/CszhfxResult';
import JznlfxResult from './Jznlfx/JznlfxResult';
import ZzfxfxResult from './Zzfxfx/ZzfxfxResult';
import XqDetail from './Zhyxzhfx/XqDetail';
import CztXq from './Cztzhfx/CztXq';
import ZzfxXq from './Zzfxfx/ZzfxXq';
import CsfxXq from './Cszhfx/CsfxXq';
import JzfxXq from './Jznlfx/JzfxXq/idnex';
import YxdjypResult from './Yxdjyp/YxdjypResult';
import XqList from './Cszhfx/XqList/idnex';
import ZhXqList from './Zhyxzhfx/ZhXqList';
import DtfxfxContext from './DtfxfxContext';
import CztXqList from './Cztzhfx/CztXqList';
import JzXqList from './Jznlfx/JzXqList';
import useBusinessMap from '../../../../common/BusinessMap/useBusinessMap';
import { Overlay } from 'ol';
import bootstrap from 'bootstrap/dist/js/bootstrap.bundle';

export default function Dtfxfx(props) {
    const [result, setResult] = useState();
    const [newType, setNewType] = useState();
    const getType = (newType) => {
        setNewType(newType)
    }
    const [cztxl, setCztxl] = useState();
    const [jzzyxl, setJzzyxl] = useState();
    const [wkt, setWkt] = useState();
    const handleCzt = (newCztxl) => {
        setCztxl(newCztxl)
    }
    const handleJzzy = (newJzzyxl) => {
        setJzzyxl(newJzzyxl)
    }
    const handleWkt = (newWkt) => {
        setWkt(newWkt)
        setXqVisible(true)
    }

    const [xqVisible, setXqVisible] = useState();

    const [xqShow, setXqShow] = useState();
    //拿cztzhfx的geom
    const [parentGeom, setParentGeom] = useState();
    //承载体风险分析
    const [cztfx, setCztfx] = useState();
    const [geom, setGeom] = useState();
    const handleCztfx = (cztfx, geom) => {
        setCztfx(cztfx)
        setGeom(geom)
        setXqVisible(true)
    }
    //  console.log('czt',cztfx)
    //致灾风险
    const [zzfx, setZzfx] = useState();
    const [geomZzfx, setGeomZzfx] = useState();
    const handleZzfx = (zzfx, geomZzfx) => {
        setZzfx(zzfx)
        setGeomZzfx(geomZzfx)
        setXqVisible(true)
    }
// console.log('zzfx',geomZzfx)

    //次生灾害
    const [csfx, setCsfx] = useState();
    const [geomCs, setGeomCs] = useState();
    const handleCs = (csfx, geomCs) => {
        setCsfx(csfx)
        setGeomCs(geomCs)
        setXqVisible(true)
    }


    const [jzfx, setJzfx] = useState();
    const [geomJzfx, setGeomJzfx] = useState()
    const handleJz = (jzfx, geomJzfx) => {
        setJzfx(jzfx)
        setGeomJzfx(geomJzfx)
        setXqVisible(true)
    }
    // console.log('result',jzfx)
    const [xqSecVisiable, setXqSecVisiable] = useState();

    //次生灾害详情的详情
    const [xqList, setXqList] = useState();
    const handleXqList = (record) => {
        setXqList(record)
        setXqSecVisiable(true)
    }
 



    //灾害影响综合分析
    const [zhXqList, setZhXqList] = useState();
    const handleZhXqList = (record) => {
        setZhXqList(record)
        setXqSecVisiable(true)
    }
    // console.log('zhXqList', zhXqList)


    const [cztXqList,setCztXqList]=useState();
    const handleCztList=(record)=>{
        setCztXqList(record)
        setXqSecVisiable(true)
    }
    const [jzXqList,setJzXqList]=useState();
    const handleJzList=(record)=>{
        setJzXqList(record)
        setXqSecVisiable(true)
    }


console.log('result',result)
    // const [xlName, setXlName] = useState();
    // console.log('xlname',xlName)

//     useEffect(()=>{
//  console.log('result',result,xqVisible,newType ,cztxl,jzzyxl,wkt)

//     },[result,xqVisible])





    return <>
        <BusinessMap>
            <DtfxfxContext.Provider value={{
                // xlName,
                // setXlName,
            }}>
                <LeftPanel onComplete={result => {
                    setResult(result)
                }} setParentGeom={setParentGeom} parentGeom={parentGeom} />
                {result && <div style={{
                    display: xqVisible ? 'none' : 'block'
                }}>
                    <RightPanel visible={!!result} onClose={e => {
                        setResult(null)
                    }}>

                        {result.type === 'zhyxzhfx' && <ZhyxzhfxResult result={result} getType={getType}
                            onCztxlupdate={handleCzt} onJzzyxlupdate={handleJzzy} onWkt={handleWkt} />}
                        {result.type === 'cztzhfx' && <CztzhfxResult result={result} onUpdate={handleCztfx} />}
                        {result.type === 'cszhfx' && <CszhfxResult result={result} onUpdateCs={handleCs} />}
                        {result.type === 'jznlfx' && <JznlfxResult result={result} onUpdateJz={handleJz} />}
                        {result.type === 'zzfxfx' && <ZzfxfxResult result={result} onUpdateZzfx={handleZzfx} />}
                        {result.type === 'yxdjyp' && <YxdjypResult result={result} onUpdate={handleCztfx} />}
                    </RightPanel>
                </div>
                }
                <div style={{
                    display: xqSecVisiable ? 'none' : 'block'
                }}>
                    {
                        newType && (cztxl||jzzyxl) && wkt && xqVisible && <XqDetail result={result} newType={newType} onClose={() => {
                            setNewType(null)
                            setXqVisible(false)
                        }} cztxl={cztxl} jzzyxl={jzzyxl} wkt={wkt} onUpdateXqList={handleZhXqList} />
                    }

                    {
                        xqVisible && cztfx && geom && <CztXq result={result} cztfx={cztfx} geom={geom} onClose={() => {
                            setCztfx(null)
                            setXqVisible(false)

                        }}  onUpdateCztList={handleCztList}/>
                    }
                    {
                        xqVisible && zzfx && geomZzfx && <ZzfxXq result={result} zzfx={zzfx} geomZzfx={geomZzfx} onClose={() => {
                            setZzfx(null)
                            setXqVisible(false)

                        }} onUpdateXqList={handleXqList} />
                    }
                    {
                        xqVisible && csfx && geomCs && <CsfxXq result={result} geomCs={geomCs} csfx={csfx} onClose={() => {
                            setCsfx(null)
                            setXqVisible(false)

                        }} onUpdateXqList={handleXqList} />
                    }
                    {
                        xqVisible && jzfx && geomJzfx && <JzfxXq result={result} jzfx={jzfx} geomJzfx={geomJzfx} onClose={() => {
                            setJzfx(null)
                            setXqVisible(false)

                        }} onUpdateJzList={handleJzList}/>
                    }
                </div>

                {
                    xqSecVisiable && xqList && <XqList xqList={xqList} onClose={() => {
                        setXqList(null)
                        setXqSecVisiable(false)
                    }} 
                    cztxl={cztxl} jzzyxl={jzzyxl}
                    />
                }
                {
                    xqSecVisiable && zhXqList && <ZhXqList zhXqList={zhXqList} onClose={() => {
                        setZhXqList(null)
                        setXqSecVisiable(false)
                    }} cztxl={cztxl} jzzyxl={jzzyxl}/>
                }
                {
                    cztXqList && xqSecVisiable && <CztXqList cztXqList={cztXqList} onClose={()=>{
                        setCztXqList(null)
                        setXqSecVisiable(false)
                    }} cztfx={cztfx}/>
                }
                {
                    jzXqList && xqSecVisiable && <JzXqList jzXqList={jzXqList} onClose={()=>{
                        setJzXqList(null)
                        setXqSecVisiable(false)
                    }} jzfx={jzfx}/>
                }


            </DtfxfxContext.Provider>
        </BusinessMap>
    </>;
}